<template>
  <div class="login-container">
    <div class="left">
      <!-- <img :src="ImageBg1" /> -->
      <div class="content">
        <!-- <img :src="logo" />
        <div class="proj-name">{{ projectName }}</div> -->
        <div class="desc"></div>
        <div class="ttiipp"> 诚信 精进 协作 创新</div>
        <div class="bottom">{{ 'MIMS-MES ' + version }} · Made by 掌紫元</div>
      </div>
    </div>
    <div class="right">
      <div style="width: 500px">
        <span style="
            color: white;
            font-size: 24px;
            text-align: center;
            display: block;
            margin-bottom: 15px;
          ">匠心制造 卓越品质</span>
        <a-card style="width: 100%" class="form-wrapper" :body-style="{ padding: '20px' }" :bordered="false">
          <div class="title">账号登录</div>
          <div class="mt-6 item-wrapper">
            <a-input v-model="username" @keydown="keydownEvent" placeholder="请输入用户名" allow-clear size="large">
              <template #prefix>
                <icon-mobile />
              </template>
            </a-input>
          </div>
          <div class="mt-4 item-wrapper">
            <a-input-password @keydown="keydownEvent" v-model="password" placeholder="请输入密码" allow-clear size="large">
              <template #prefix>
                <icon-lock />
              </template>
            </a-input-password>
          </div>
          <div class="flex-sub"></div>
          <div class="mt-10">
            <a-button type="primary" class="login" :loading="loading" @click="onLogin">
              登录
            </a-button>
          </div>
          <div class="mt-4 mb-8 my-width flex-sub">
            <div class="flex justify-between">
              <a-checkbox v-model="autoLogin">记住密码</a-checkbox>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ImageBg1 from '@/assets/jfdl.png'
import logo from '@/assets/logo.png'
import { post, Response, get } from '@/api/http'
import { baseAddress, login } from '@/api/url'
import { Message } from '@arco-design/web-vue'
import { UserState } from '@/store/types'
import setting from '../../setting'
import useAppInfo from '@/hooks/useAppInfo'
import useUserStore from '@/store/modules/user'
import md5 from 'js-md5'
import Watermark from '@/utils/watermark'

export default defineComponent({
  name: 'Login',
  setup() {
    const keydownEvent = (e: any) => {
      if (loading.value) {
        return
      }
      if (e.key === 'Enter') {
        onLogin()
      }
    }

    const projectName = setting.projectName

    const str = localStorage.getItem('rember') || false

    const username = ref('')
    const password = ref('')
    const autoLogin = ref(false)

    const uld = JSON.parse(str === 'null' ? '{}' : str || '{}')
    if (Object.keys(uld).length > 0) {
      username.value = uld.username
      password.value = uld.password
      autoLogin.value = true
    }
    const { version } = useAppInfo()

    const loading = ref(false)
    const router = useRouter()
    const route = useRoute()
    const userStore = useUserStore()
    const onLogin = () => {
      localStorage.removeItem('user-info')
      let pwd = md5(password.value)
      //3,8,20,27
      const pwdarr = pwd.split('')
      pwdarr.splice(3, 0, 'a')
      pwdarr.splice(8, 0, 'b')
      pwdarr.splice(20, 0, 'a')
      pwdarr.splice(27, 0, 'b')

      pwd = pwdarr.join('')

      post({
        url: login,
        data: {
          username: username.value,
          password: pwd,
        },
        // headers: {
        //   user: 'PC_' + username.value,
        // },
      })
        .then(({ data, code, message }: Response) => {
          if (code !== 200) {
            loading.value = false
            Message.error({ content: message, duration: 5000 })
            return
          }
          console.log(route.query.redirect)
          userStore.saveUser(data as UserState).then(() => {
            router
              .replace({
                // path: route.query.redirect ? (route.query.redirect as string) : '/',
                path:'/index/main',
              })
              .then(() => {
                sessionStorage.setItem(
                  'userLoginData',
                  JSON.stringify({ username: username.value, password: pwd })
                )
                post({
                  url: '/admin/acl/user/getUserName',
                  data: {
                    username: JSON.parse(sessionStorage.getItem('userLoginData') as any).username,
                  },
                }).then(({ data, code }: any) => {
                  if (code === 200) {
                    let date = new Date()
                    Watermark.set(
                      data.nickName + (date.getMonth() + 1) + '月' + date.getDate() + '日'
                    )
                  }
                })
                Message.success('登录成功')
                loading.value = false
              })
          })
        })
        .catch((error) => {
          loading.value = false
          Message.error(error.message)
        })
      loading.value = true
    }
    return {
      projectName,
      version,
      username,
      password,
      autoLogin,
      loading,
      onLogin,
      ImageBg1,
      logo,
      keydownEvent,
    }
  },
})
</script>

<style lang="less" scoped>
.arco-card {
  width: 100% !important;
}

@keyframes scale-to {
  0% {
    transform: scale(0.2, 0.2);
  }

  100% {
    transform: scale(1, 1);
  }
}

@leftWith: 35%;

.login-container {
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  background-image: url(@/assets/jfdl.png);
  background-position: 0 0;
  background-size: 100% 100%;

  .left {
    position: relative;
    width: @leftWith;
    min-width: @leftWith;
    max-width: @leftWith;
    overflow: hidden;

    &>img {
      height: 100%;
      width: 100%;
      object-fit: fill;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background-color: transparent;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      &>img {
        width: 70px;
        height: 70px;
        margin-top: 20%;
      }

      .proj-name {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        margin-top: 10px;
      }

      .desc {
        font-size: 14px;
        color: #fff;
        margin-top: 10px;
      }

      .ttiipp {
        margin-top: 600px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bold;
        font-weight: 500;
        font-size: 30px;
        animation: scale-to 1s linear;
      }

      .bottom {
        color: silver;
        margin-bottom: 5%;
        font-size: 16px;
      }
    }
  }

  .right {
    flex: 1;
    background-color: transparent;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;

    .form-wrapper {
      width: 50%;
      box-shadow: 0 0 10px #cfcfcf;
      border-radius: 10px;

      .title {
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .login {
        width: 100%;
      }
    }
  }
}

@media screen and(max-width: 966px) {
  .left {
    display: none;
  }

  .right {
    background-image: url('../../assets/img_login_mobile_bg_01.jpg');
    background-size: cover;

    .form-wrapper {
      width: 80% !important;
    }
  }
}
</style>
